<template>
  <div class="home_box">
    <div class="common-layout">
      <el-container>
        <!-- 顶部标题 -->
        <el-header class="header">
          <span>商品管理系统</span>
          <span @click="userLogout">
            <el-button type="danger"
                       plain>退出登录</el-button>
          </span></el-header>
        <el-container>
          <!-- 操作列表 -->
          <el-aside width="200px">
            <el-row class="tac"
                    style="width: 100%;">
              <el-col>
                <h3>操作列表</h3>
                <el-menu router="true"
                         default-active="user"
                         @open="handleOpen"
                         @close="handleClose">
                  <el-menu-item index="user">
                    <el-icon><icon-menu /></el-icon>
                    <span>个人信息</span>
                  </el-menu-item>

                  <el-menu-item index="shop">
                    <el-icon>
                      <setting />
                    </el-icon>
                    <span>商品管理</span>
                  </el-menu-item>
                </el-menu>
              </el-col>
            </el-row>

          </el-aside>
          <!-- 主体内容展示 -->
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import router from "@/router"
import { onMounted } from 'vue'

//防止页面刷新，页面卡主
onMounted(() => {
  router.push("/user")
})

//退出登录
const userLogout = () => {
  ElMessageBox.confirm(
    '确认退出登录?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      //退出
      localStorage.clear()
      router.push("/login")
      ElMessage({
        message: "已退出登录",
        type: 'success',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })

}



</script>

<style scoped>
.home_box {
  width: 100%;
  height: 100%;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  font-weight: 700;
  border-bottom: 2px solid rgb(67, 66, 66);
}

.header span {
  margin-left: auto;
}

.header span:last-child {
  font-size: 15px;
  font-weight: 500;
}

h3 {
  padding-left: 10px;
  padding-top: 10px;
}
</style>
